<template>
  <div>
    <!--头部-->
    <base-info ref="baseInfo"/>
    <!--小方块-->
    <grid-menu class="mb20 mt20" hidden/>
    <!--统计-->
    <visit-chart ref="visitChart"/>
    <!--用户-->
<!--    <user-chart ref="userChart" class="mb20" />-->
    <el-row :gutter="24" style="width: 99%;margin: 0 auto" >
      <el-col class="ivu-mb mb10 dashboard-console-visit" >
        <el-card :bordered="false" dis-hover>
          <div slot="header">
            <div class="acea-row row-middle">
              <div class="header_title">所属行业</div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart3"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import baseInfo from './components/baseInfo'; //首页顶部统计
import gridMenu from './components/gridMenu'; //快捷入口
import visitChart from './components/visitChart';
import userChart from './components/userChart'; //用户统计
import { checkPermi } from "@/utils/permission";
import { industryStatisticsApi } from '@/api/dashboard' // 权限判断函数
export default {
  name: 'Dashboard',
  components: { baseInfo, gridMenu, visitChart, userChart},
  data() {
    return {
      authStatus:null,
      authHost:'',
      xArr:[],
      yArr:[],
      authQueryStatus:false,
      chartData:{
        chart1:{
          chart:null,
          loading:true
        },
        chart2:{
          chart:null,
          loading:true
        },
        chart3:{
          chart:null,
          loading:true
        },
        chart4:{
          chart:null,
          loading:true
        },
      },
    }
  },
  methods:{

    checkPermi,
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'18%',
          left: '5%',
          right: '0',
          bottom: '35%',
        },
        color: ['#ff824a', '#fcc727'],
        legend: {
          top:0,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          // data: ['男', '女'],
        },
        xAxis: {
          // data: ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],
          data: [],
          axisLabel: {
            interval:0,
            // rotate:60,
            textStyle: {
              color: '#000000',
              fontSize: '11',
            },
            formatter: function (value) {
              var ret = '';
              var maxLength = 5;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          name: '单位：人',
          nameTextStyle:{
            color:'#000',
            fontSize:12
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#000',
            }
          }
        },
        series: [{
          name:'人数',
          // data: getNum(20,4000,2000),
          data:[],
          type: 'bar',
          barWidth:13,
          itemStyle: {
            normal: {
              label:{
                show:true,
                position:'top',
                textStyle:{
                  color:'#000',
                  fontSize:14
                },
              },
              barBorderRadius:[15, 15, 15, 15],
              color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                offset:0,
                color:'#09ace5'
              },{
                offset:1,
                color:'#3fe3a9'
              }])
            }
          }
        }
        ]
      };
        industryStatisticsApi().then((res) => {
          let data=res || []
          let data1=[];
          let data2=[];
          data.forEach(item =>{
            data1.push(item.name);
            data2.push(item.value);
          })
          option.xAxis.data=data1;
          option.series[0].data = data2;
          myCharts.hideLoading();
          myCharts.setOption(option);
        }).catch((res) => {
          // console.log(res)
        })


    },
  },
  mounted() {
    this.initChart3()
    // this.getStatistics();
  },
}
</script>
